<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>鼠标移过，改变图片路径</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: #000;
        }
        
        img {
            border: 0;
            border-radius: 3px;
        }
        
        ul {
            list-style-type: none;
        }
        
        #box {
            width: 212px;
            border: 5px solid #fff;
            overflow: hidden;
            zoom: 1;
            background: #fff;
            border-radius: 5px;
            margin: 10px auto;
            padding: 0 0 3px 3px;
        }
        
        #box li,
        #box li img {
            float: left;
            width: 50px;
            height: 50px;
        }
        
        #box li {
            margin: 3px 3px 0 0;
        }
        
        #box li.first {
            position: relative;
        }
        
        #box li.first,
        #box li.first img {
            width: 156px;
            height: 156px;
        }
        
        #box li.first div {
            position: absolute;
            top: 0;
            left: 0;
            width: 156px;
            height: 156px;
            display: none;
            opacity: 0.5;
            filter: alpha(opacity=50);
            background: #fff url(img/loading.gif) 50% 50% no-repeat;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var bigImg = document.querySelector('.first img');
            var box = document.getElementById('box');
            // var smallImg1 = document.querySelector('#box :nth-child(2) img');
            // var smallImg2 = document.querySelector('#box :nth-child(3) img');
            // smallImg1.onclick = function(e) {
            //     imgUrl = smallImg1.getAttribute('src');
            //     bigImg.setAttribute('src', imgUrl)

            // }
            // smallImg2.onclick = function(e) {
            //     imgUrl = smallImg2.getAttribute('src');
            //     bigImg.setAttribute('src', imgUrl)

            // }
            //1.通过循环给每一个元素添加一个事件监听
            // var smallImgs = document.querySelectorAll('#box li img');
            // console.log(smallImgs)
            // for (var i = 1; i < smallImgs.length; i++) {
            //     smallImgs[i].addEventListener('mouseenter', function(e) {
            //         imgUrl = this.getAttribute('src');
            //         bigImg.setAttribute('src', imgUrl)

            //     })
            // }
            //2.通过事件代理的方式
            box.addEventListener('click', function(e) {
                if (e.target != box) {
                    var imgUrl = e.target.getAttribute('src') //获取点击元素的src属性值
                    console.log
                    bigImg.setAttribute('src', imgUrl)
                }

            })


        };
    </script>
</head>

<body>
    <ul id="box">
        <li class="first"><img src="img/3.jpg">
            <div></div>
        </li>
        <li>
            <a href="javascript:;"><img src="img/1.jpg"></a>
        </li>
        <li>
            <a href="javascript:;"><img src="img/2.jpg"></a>
        </li>
        <li>
            <a href="javascript:;"><img src="img/3.jpg"></a>
        </li>
        <li>
            <a href="javascript:;"><img src="img/4.jpg"></a>
        </li>
        <li>
            <a href="javascript:;"><img src="img/5.jpg"></a>
        </li>
        <li>
            <a href="javascript:;"><img src="img/6.jpg"></a>
        </li>
        <li>
            <a href="javascript:;"><img src="img/7.jpg"></a>
        </li>
        <li>
            <a href="javascript:;"><img src="img/8.jpg"></a>
        </li>
        <li>
            <a href="javascript:;"><img src="img/9.jpg"></a>
        </li>
        <li>
            <a href="javascript:;"><img src="img/10.jpg"></a>
        </li>
        <li>
            <a href="javascript:;"><img src="img/11.jpg"></a>
        </li>
    </ul>
</body>

</html>